<template>
  <div class="login-box">
    <div class="login-form-wrapper">
      <!-- 登录Arco Design Pro -->
      <div class="login-form-title">{{ $t('密码修改') }}</div>
      <!-- <div class="login-form-sub-title">{{ $t('login.form.title') }}</div> -->
      <div class="login-form-error-msg">{{ errorMessage }}</div>
      <a-form ref="loginForm" :model="userInfo" class="login-form" layout="vertical" @submit="handleSubmit">
        <a-form-item field="username" :rules="[{ required: true, message: $t('login.form.userName.errMsg') }]"
          :validate-trigger="['change', 'blur']" hide-label>
          <a-input v-model="userInfo.username" :placeholder="$t('login.form.userName.placeholder')">
            <template #prefix>
              <icon-user />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item field="prePassword" :rules="[{ required: true, message: $t('login.form.prePassword.errMsg') }]"
          :validate-trigger="['change', 'blur']" hide-label>
          <a-input-password v-model="userInfo.prePassword" :placeholder="$t('login.form.prePassword.placeholder')" allow-clear>
            <template #prefix>
              <icon-lock />
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item field="password" :rules="[{ required: true, message: $t('login.form.password.errMsg') }]"
          :validate-trigger="['change', 'blur']" hide-label>
          <a-input-password v-model="userInfo.password" :placeholder="$t('login.form.password.placeholder')" allow-clear>
            <template #prefix>
              <icon-lock />
            </template>
          </a-input-password>
        </a-form-item>

        <a-space :size="16" direction="vertical">
          <a-button type="primary" html-type="submit"  long :loading="loading" >
            {{ $t('修改密码') }}
          </a-button>
        </a-space>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';
import { ValidatedError } from '@arco-design/web-vue/es/form/interface';
import { useI18n } from 'vue-i18n';
import { useStorage } from '@vueuse/core';

import useLoading from '@/hooks/loading';

import {updateUser} from '@/api/login'

import { useAppStore, useUserStore } from '@/store';
import { setTokenU, clearToken } from '@/utils/auth';
const userStore = useUserStore();
const authCodeUrl = ref(import.meta.env.VITE_API_BASE_URL + 'Verify/user/getVerify');
const clickAuthCodeImage = () => {
  authCodeUrl.value = import.meta.env.VITE_API_BASE_URL + 'Verify/user/getVerify?' + Date.now()
}
const router = useRouter();
const { t } = useI18n();
const errorMessage = ref('');
const { loading, setLoading } = useLoading();


const loginConfig = useStorage('login-config', {
  rememberPassword: true,
  username: '', // 演示默认值
  password: '', // demo default value
  prePassword: ''
});
const userInfo = reactive({
  username: loginConfig.value.username,
  password: loginConfig.value.password,
  prePassword : loginConfig.value.prePassword,
});
const handleSubmit = async ({ errors, values }: { errors: ValidatedError | undefined; values: any }) => {
  if (!errors) {
    console.log(values);
    setLoading(true);
    try {
      const { data } = await updateUser(userInfo.username, userInfo.prePassword, userInfo.password);
      console.log(data);
      if (data.code == 200) {
        Message.success('修改成功！');
        router.push('/');
      } else {
        Message.error('修改失败!');
      }
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  }
};


const saoMa = () => {
  router.push({
    name: 'saoMa',
  });
};
</script>

<style lang="less" scoped>
.login-form {
  &-wrapper {
    width: 320px;
  }

  &-title {
    color: var(--color-text-1);
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
  }

  &-sub-title {
    color: var(--color-text-3);
    font-size: 16px;
    line-height: 24px;
  }

  &-error-msg {
    height: 32px;
    color: rgb(var(--red-6));
    line-height: 32px;
  }

  &-password-actions {
    display: flex;
    justify-content: space-between;
  }

  &-register-btn {
    color: var(--color-text-3) !important;
  }
}

@font-face {
  font-family: "iconfont";
  /* Project id 3606608 */
  src: url('//at.alicdn.com/t/c/font_3606608_y4iw4xdogic.woff2?t=1661252460893') format('woff2'),
    url('//at.alicdn.com/t/c/font_3606608_y4iw4xdogic.woff?t=1661252460893') format('woff'),
    url('//at.alicdn.com/t/c/font_3606608_y4iw4xdogic.ttf?t=1661252460893') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-yanzhengyanzhengma:before {
  content: "\e624";
}

.identifyingCode {
  width: 170px;
}

.identifyingCode-img {
  margin-left: 40px;
}

.login-form-title {
  color: rgb(230, 230, 238);
  font-size: 21px;
  text-align: center;
}

.login-box {
  width: 520px;
  height: 380px;
  display: flex;
  justify-content: center;
  align-items: center;
  // background-color: rgba(44, 58, 188, 0.5);
  box-shadow: 0 0 4px 3px #a2cbf7;
  // border: 1px solid rgb(13, 76, 127);
  border-radius: 10px;
}


::v-deep .arco-input-wrapper {
  background-color: rgba(253, 253, 253, 0.9);
  color: rgb(59, 62, 62);
  border-radius: 7px;
}
.arco-btn-primary{
  background-color: #0575ef;
}
// .login-form-wrapper {}

</style>
